/**
 * stylus
 * 变量(Variables)
 */
//  以指定表达式为变量，然后在我们的样式中贯穿使用
font-size = 14px

body 
    font font-size Arial , sans-serif
// 变量列表
font = font-size "Lucida Grande", Arial

div
    font font

//  属性查找
// Stylus有另外一个很酷的独特功能，不需要分配值给变量就可以定义引用属性
#logo
    position: absolute
    top: 50%
    left: 50%
    width: w = 150px  // 定义变量w
    height: h = 80px  //定义变量h
    margin-top: -(w/2)
    margin-bottom: - (h/2)  

// 我们不使用这里的变量w和h, 而是简单地前置@字符在属性名前来访问该属性名对应的值
#demo
    position: absolute
    top: 50%
    left: 50%
    width: 150px  // 定义变量w
    height: 80px  //定义变量h
    margin-top: -(@width / 2)
    margin-bottom: - (@height / 2)  

//  基于其他属性有条件地定义属性
position()
  position: arguments
  z-index: 1 unless @z-index

#logo1
  z-index: 20
  position: absolute

#logo2
  position: absolute
// 属性会“向上冒泡”查找堆栈直到被发现，或者返回null（如果属性搞不定）
body
  color: red
  ul
    li
        color:blue
        a
            background-color: @color   